<html> 
 
<head> 
<title>009 | Basic Filter | J3D</title> 

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<script type="text/javascript" src="../build/j3d.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>


<script id="filter" type="x-shader">
	//#name Pixelate
	//#author bartekd
	
	//#include CommonFilterInclude
	
	//#vertex
	//#include BasicFilterVertex
	
	//#fragment
	uniform sampler2D uTexture;
    uniform vec2 wsize;
    uniform float cellsize;

    uniform float roundness;
    uniform float softness;
	
	varying vec2 vTextureCoord;

	void main(void) {
        vec2 t = vTextureCoord;
        vec2 tc = vTextureCoord;

        float hc = cellsize * 0.5;

        t.x *= wsize.x;
        t.y *= wsize.y;

        tc.x *= wsize.x;
        tc.y *= wsize.y;

        t.x = t.x - mod(t.x, cellsize) + hc;
        t.y = t.y - mod(t.y, cellsize) + hc;

        float d = distance(t, tc);

        t.x /= wsize.x;
        t.y /= wsize.y;

        vec3 col = texture2D(uTexture, t).rgb;
        vec3 blk = vec3(0.0, 0.0, 0.0);

        float e = smoothstep(hc * (roundness - softness) * col.r, hc * roundness * col.r, d);

        gl_FragColor = vec4(mix(col, blk, e), 1.0);
	}
</script>

<script>
	
	var engine, cube, pp, sun;
	var filter, post;
    var props, gui;
	
	function init() {
		if(!checkWebGL()) return;

        props = {
            cellsize: 16,
            roundness: 0.9,
            softness: 0.2,
            enabled: true
        }

        gui = new dat.GUI({ autoPlace: false });

		gui.add(props, 'cellsize').min( 1.0 ).max( 100.0 );
        gui.add(props, 'roundness').min( 0.0 ).max( 5.0 );
        gui.add(props, 'softness').min( 0.0 ).max( 5.0 );
        gui.add(props, 'enabled');


        gui.domElement.style.position = 'fixed';
		gui.domElement.style.right = '140px';
		gui.domElement.style.zIndex = 200;
        document.body.appendChild( gui.domElement );
		
		engine = new J3D.Engine(null, { resolution: 1 });

		engine.setClearColor(J3D.Color.black);
		
		sun = new J3D.Transform();
		sun.light = new J3D.Light(J3D.DIRECT);
		sun.light.color = new J3D.Color(.9, .8, .7, 1);
		sun.light.direction = new v3(-1, 0, -1).norm();
		
		engine.scene.ambient = new J3D.Color(.1, .12, .14, 1);
		
		cube = new J3D.Transform();
		cube.rotation = new v3(0, Math.PI, 0); // All rotations are in radians
		cube.renderer = J3D.BuiltinShaders.fetch("Phong");
		cube.renderer.specularIntensity = 10;
		cube.renderer.shininess = 32;
        engine.scene.add(cube);

        J3D.Loader.loadJSON("models/monkeyhi.js", function(j) {  cube.geometry = new J3D.Mesh(j); } );
		
		var camera = new J3D.Transform();
		camera.camera = new J3D.Camera();
		camera.position.z = 3;
		engine.camera = camera;
		
		engine.scene.add(camera, sun);

		post = new J3D.Postprocess(engine);
		post.filter = new J3D.ShaderUtil.parseGLSL(document.getElementById("filter").firstChild.nodeValue);
        post.filter.wsize = [window.innerWidth, window.innerHeight];

		draw();
	}
	
	function draw() {
		requestAnimationFrame(draw);	
		
		cube.rotation.x += Math.PI * J3D.Time.deltaTime / 12000;
		cube.rotation.y -= Math.PI * J3D.Time.deltaTime / 6000;

        post.filter.cellsize = props.cellsize;
        post.filter.roundness = props.roundness;
        post.filter.softness = props.softness;
		
		if(props.enabled) post.render();
        else engine.render();
	}
	
</script>

</head> 

<body onload="init();">
	
	<script>
		setLabels("009. Basic filter", "Custom image effect applied to a scene");
	</script>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
	
</body> 

</html> 












